
<template>
  <div>
      <el-header>待审核用户列表</el-header>
    <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="筛选">
      <el-select v-model="searchType">
        <el-option  label="全部" value="all"  ></el-option>
        <el-option label="姓名" value="name"></el-option>
        <el-option label="电话号码" value="phone"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="输入">
        <el-input v-model="searchValue" ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>
    <el-table :data="this.UserList" border style="width: 100%">
      <el-table-column fixed prop="name" align="center" label="租赁方姓名" width="150"></el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center" ></el-table-column>
      <el-table-column prop="idNumber" label="身份证" align="center"></el-table-column>
      <el-table-column prop="authentication" label="审核状态" align="center"></el-table-column>
      <el-table-column prop="money" label="账户余额" align="center" ></el-table-column>
      <el-table-column fixed="right" align="center" width="300" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="operat(scope,1)" >通过审核</el-button>
          <el-button type="primary"  @click="operat(scope,-1)" >拒绝审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="paginationMain">
        <span @click="myfirstPage">首页</span>
        <span @click="myprevious">上一页</span>
        <span @click="mynextPage">下一页</span>
        <span @click="mymaxPage">尾页</span>
        <i>当前页:{{this.curPage}}   总页数:{{this.total}}</i>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
    created(){
     this.getAllUnUSers();
  },
  data() {
    return {
        UserList:[],//用户列表
        searchType:'all', //查询类型
        searchValue:'', //查询的值

        total:'',  //共有多少页
        pageSize:5, //一页显示条数
        curPage:1, //当前页是第几页
    };
  },
  methods: {
      //获取所有未审核的用户
      async getAllUnUSers(){
        //console.log('加载数据');
        //分页版
        const res = await axios.get("/user/getAllHireUsers",
         {params:{authentication:'0',pageSize:this.pageSize,curPage:this.curPage}});
         //console.log(res.data);
         let arr = res.data.rows;
          let newArr = this.transferAuthentication(arr);
          this.UserList = newArr; 
            if(this.UserList.length==0){
                this.open();
            }
         this.total = res.data.pages;
      },
      async queryByName(){
          const res = await axios.post("/user/queryHireByName",{type:'hire',name:this.searchValue});
          // console.log(res.data);
          let arr = res.data;
          let newArr = this.transferAuthentication(arr);
          this.UserList = newArr; 
            if(this.UserList.length==0){
                this.open();
            }
      },
      async queryByPhone(){
          const res = await axios.post("/user/queryHireByPhone",{type:'hire',phone:this.searchValue});
            //console.log(res.data);
            let arr = res.data;
          let newArr = this.transferAuthentication(arr);
          this.UserList = newArr;
            if(this.UserList.length==0){
                this.open();
            }
      },
      //根据审核是否通过 渲染对应项
      transferAuthentication(arr){
        arr.forEach(item=>{
          if(item.authentication == '1'){
                 item.authentication = '审核通过'
            }else if (item.authentication == '0'){
                item.authentication = '审核未通过'
            }
        });
        return arr;
      },
    query(){
       if(this.searchType=='all'){
           this.getAllHireUSers();
           this.searchValue='';
       }else if(this.searchType=='name'){
           this.queryByName();
           this.searchValue='';
       }else if(this.searchType=='phone'){
           this.queryByPhone();
           this.searchValue='';
       }
        
    },
    //未查询到用户的弹框
    open(){
        this.$alert('未查询到该用户，请重新输入', '提示', {
            confirmButtonText: '确定',
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
            });
    },
    //审核
    async operat(p,n) {
      const _id = p.row._id;
        let param ={_id,authentication:n};
      const res = await axios.post("/user/updateUserState",param);
      if(res.data){
          this.getAllUnUSers();
      }
      
    },
    myfirstPage() {
      this.curPage = 1;
      this.getAllUnUSers();
    },
    myprevious() {
      if(this.curPage!=1){
        this.curPage -=1;
        this.getAllUnUSers();
      }
    },
    mynextPage() {
      if(this.curPage!=this.total){
        this.curPage +=1;
        this.getAllUnUSers();
      }
    },
    mymaxPage() {
      this.curPage = this.total;
      this.getAllUnUSers();
    }
  },
//   
};
</script>

<style scoped>
.el-header{
    font-weight: bold;
}
.el-main[data-v-452a4712] {
  text-align: center !important;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  align-content: center;
}
.pagination .paginationMain i{
  line-height: 30px;
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>